<!-- 流程弹框设置 -->
<template>
  <a-modal
    v-model:visible="workFlowVisible"
    class="form-modal"
    width="60%"
    :esc-to-close="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title>
      <h2>流程设置</h2>
    </template>
    <div class="tips">同一模板可以有多个审批流程</div>
    <a-button long type="outline" @click="createFlow">
      <template #icon> <icon-plus /> </template>新建流程
    </a-button>
    <div class="meta">
      <div>选择已有流程使用</div>
      <a-input-search
        search-button
        :style="{ width: '320px' }"
        placeholder="请输入名称"
      />
    </div>
    <div class="form-list-content">
      <a-empty v-if="props.workFlowList.data.length == 0" />

      <a-radio-group
        v-model="demandCheckValue"
        direction="vertical"
        style="width: 100%"
      >
        <div
          v-for="item in props.workFlowList.data"
          :key="item.id"
          class="form-list"
        >
          <a-radio :value="item.id">
            <div class="form-name">{{ item.name }}</div>
            <div class="form-info">
              <span
                >创建时间：{{
                  `${dayjs(item.createdAt).format('YYYY-MM-DD')}`
                }}</span
              >
              <span>创建人：{{ item.userName }}</span>
            </div>
          </a-radio>
          <a-space class="btn-group">
            <a-button type="text" @click="editFlow(item.id)">编辑</a-button>
            <a-popconfirm content="确定删除吗?" @ok="delFlow(item.id)">
              <a-button type="text">删除</a-button>
            </a-popconfirm>
          </a-space>
        </div>
      </a-radio-group>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import dayjs from 'dayjs';

  const props = withDefaults(
    // 参数说明
    defineProps<{
      flowId: number;
      workFlowList: {
        checkId: number;
        data: any;
      };
    }>(),
    {}
  );

  const emit = defineEmits(['createFlow', 'update:workFlowList']);

  const workFlowVisible = ref(false);
  const demandCheckValue = computed({
    get: () => {
      return props.workFlowList.checkId;
    },
    set: (val) => {
      props.workFlowList.checkId = val;
    },
  });
  const handleCancel = () => {
    workFlowVisible.value = false;
  };
  const handleOk = () => {
    workFlowVisible.value = false;
    emit('update:workFlowList', demandCheckValue.value);
  };
  const editFlow = (id: number) => {
    emit('createFlow', id);
  };
  const delFlow = (id: number) => {};
  const createFlow = () => {
    emit('createFlow');
  };
  defineExpose({ workFlowVisible });
</script>

<style lang="less" scoped>
  .form-modal {
    display: flex;
    flex-direction: column;
    height: 100%;

    .tips {
      border-radius: 5px;
      background: rgba(230, 247, 255, 1);
      padding: 5px 10px;
      margin-bottom: 16px;
      font-size: 16px;
    }

    .meta {
      display: flex;
      justify-content: space-between;
      margin: 16px 0;
      font-size: 16px;
    }

    .form-list-content {
      height: calc(100vh - 350px);
      overflow: auto;

      .form-list {
        border-bottom: 1px solid #eee;
        padding-bottom: 16px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .form-name {
          font-size: 16px;
        }

        .form-info {
          font-size: 12px;
          color: #666;

          span {
            margin-right: 16px;
          }
        }
      }
    }
  }
</style>
